<template>
  <div class="box">
    <hr />
    <h3 class="title">答案解析</h3>
    <p class="label">正确答案:{{ rightAnwer }}</p>
    <div class="info">
      <span>难度 : {{ difficulty[answer.difficulty] }}</span>
      <span>提交次数 : {{ answer.submitNum }}</span>
      <span>正确次数 : {{ answer.correctNum }}</span>
    </div>
    <p class="content">{{ answer.answerAnalysis }}</p>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    answer: { type: Object, default: () => ({}) }
  },
  data () {
    return {
      difficulty: { 0: '全部', 1: '简单', 2: '中等', 3: '困难' },
      def: 'B'
    }
  },
  computed: {
    rightAnwer () {
      if (this.answer.singleAnswer) {
        return this.answer.singleAnswer
      } else if (this.answer.multipleAnswer) {
        return this.answer.multipleAnswer.join()
      } else {
        return this.def
      }
    }
  }
}
</script>
<style scoped lang="less">
.box {
  padding: 0 30px;
  margin-bottom: 100px;
  .title {
    margin-top: 30px;
  }
  .label {
    margin: 20px 0;
    color: yellowgreen;
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690px;
    height: 64px;
    margin: 0 auto;
    padding: 0 20px;
    background: #f7f4f5;
    border-radius: 8px;
    font-size: 24px;
    color: #545671;
  }
  .content {
    padding-bottom: 100px;
    margin: 20px 0;
  }
}
</style>
